<template>
	<view class="container">
		
		<!-- 主要内容区域 -->
		<view class="main-content">
			<image class="logo" src="@/static/images/speaker.png" mode="aspectFit"></image>
			<text class="app-name">优声配音</text>
			<text class="slogan">一键文字转语音</text>
			<text class="sub-slogan">极速生成抖音和广告配音</text>
			
			<!-- 主要按钮 -->
			<button class="btn btn-primary" @tap="handleMakeVoice">制作配音</button>
			<button class="btn btn-secondary" open-type="share">推荐给朋友</button>
			
			
			<!-- 功能图标区域 -->
			<!-- <view class="feature-grid">
				<view class="feature-item" @tap="handleInvite">
					<view class="feature-icon-wrap">
						<image class="feature-icon" src="/static/images/money.png" mode="aspectFit"></image>
						<text class="hot-tag" v-if="showHotTag">热门</text>
					</view>
					<text class="feature-text">邀请赚现金</text>
				</view>
				<view class="feature-item" @tap="handleGetText">
					<image class="feature-icon" src="/static/images/text.png" mode="aspectFit"></image>
					<text class="feature-text">文案提取</text>
				</view>
				<view class="feature-item" @tap="handleRemoveWatermark">
					<image class="feature-icon" src="/static/images/video.png" mode="aspectFit"></image>
					<text class="feature-text">去水印</text>
				</view>
				<view class="feature-item" @tap="handlePcVersion">
					<image class="feature-icon" src="/static/images/pc.png" mode="aspectFit"></image>
					<text class="feature-text">配音电脑版</text>
				</view>
				<view class="feature-item" @tap="handleDialogue">
					<image class="feature-icon" src="/static/images/chat.png" mode="aspectFit"></image>
					<text class="feature-text">对话配音</text>
				</view>
				<view class="feature-item" @tap="handleMd5">
					<image class="feature-icon" src="/static/images/md5.png" mode="aspectFit"></image>
					<text class="feature-text">md5去重</text>
				</view>
			</view> -->
		</view>
		
		<!-- 添加到桌面提示 -->
		<view class="add-to-desktop" v-if="showAddToDesktop">
			<view class="desktop-text">
				<tts-icons type="guanbi" size="40" color="#ddd" @tap="closeAddToDesktop"></tts-icons>
				<view class="text-wrapper">
					<text class="text-title">添加到我的桌面,方便下次打开使用</text>
				</view>
			</view>
			<button class="add-btn" @tap="handleAddToDesktop">去添加</button>
		</view>
		<view class="mask" v-if="mask">
			<view class="arrow">
				<tts-icons type="zhishijiantou" size="100" color="#ddd"></tts-icons>
			</view>
			<view class="mask-content">
				<view class="mask-title">!.选择“添加到桌面”</view>
				<image class="mask-image1" src="@/static/images/icon3.png" mode="widthFix"></image>
				<view class="mask-title">2.从手机桌面打开</view>
				<image class="mask-image1" src="@/static/images/icon.jpg" mode="widthFix"></image>
				<tts-icons type="guanbi" style="margin-top: 20rpx;" size="50" color="#ddd" @tap="closeMask"></tts-icons>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { userState } from '@/services/user'
import { wxLogin, getUserInfo } from '@/services/auth'
import { onShareAppMessage, onShareTimeline } from '@dcloudio/uni-app'
import store from '@/store/index'

// 状态变量
const showHotTag = ref(true)
const showAddToDesktop = ref(true)
const isLoggingIn = ref(false)
const mask = ref(false)

// 处理登录
async function handleLogin() {
	try {
		if (isLoggingIn.value) return
		isLoggingIn.value = true
		
		// 微信登录
		await wxLogin()
		// 获取用户信息
		store.dispatch('user/getUserInfo')
		
		console.log('微信登录成功', userState.value)
	} catch (error) {
		console.error('登录失败:', error)
		uni.showToast({
			title: error.message || '登录失败，请重试',
			icon: 'none'
		})
	} finally {
		isLoggingIn.value = false
	}
}

// 页面加载时自动登录
onMounted(() => {
	handleLogin()
})

// 方法
const handleMakeVoice = () => {
	uni.navigateTo({
		url: '/pages/create/create'
	})
}

const handleInvite = () => {
	uni.navigateTo({
		url: '/pages/invite/index'
	})
}

const handleGetText = () => {
	uni.navigateTo({
		url: '/pages/text/index'
	})
}

const handleRemoveWatermark = () => {
	uni.navigateTo({
		url: '/pages/watermark/index'
	})
}

const handlePcVersion = () => {
	uni.navigateTo({
		url: '/pages/pc/index'
	})
}

const handleDialogue = () => {
	uni.navigateTo({
		url: '/pages/dialogue/index'
	})
}

const handleMd5 = () => {
	uni.navigateTo({
		url: '/pages/md5/index'
	})
}

const handleAddToDesktop = () => {
	mask.value = true
}
const closeMask = () => {
	mask.value = false
}

const closeAddToDesktop = () => {
	showAddToDesktop.value = false
}


//小程序分享功能
onShareAppMessage(() => {
    return {
        title: '全免配音 - 一键文字转语音',
		path: '/pages/index/index',
		imageUrl: '/static/images/speaker.png'
    }
})
//分享到朋友圈
onShareTimeline(() => {
    return {
        title: '全免配音 - 一键文字转语音',
		query: '',
		imageUrl: '/static/images/speaker.png'
    }
})
</script>

<style lang="scss">
.mask {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0, 0, 0, 0.8);
	z-index: 99;
	.arrow {
		display: flex;
		justify-content: flex-end;
		margin-right: 50rpx;
	}
	.mask-content {	
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		.mask-title {
			margin-top: 40rpx;
			font-size: 32rpx;
			color: #fff;
			margin-bottom: 20rpx;
		}
		.mask-image1 {
			width:80%;
		}
	}
}

.container {
	min-height: 100vh;
	background-color: #f5f5f5;
	position: relative;
}

.header {
	padding: 20rpx;
	text-align: center;
	.title {
		font-size: 36rpx;
		font-weight: bold;
	}
}

.main-content {
	padding: 40rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
	
	.logo {
		width: 200rpx;
		height: 200rpx;
		margin-bottom: 30rpx;
	}
	
	.app-name {
		font-size: 40rpx;
		font-weight: bold;
		margin-bottom: 20rpx;
	}
	
	.slogan {
		font-size: 32rpx;
		margin-bottom: 10rpx;
	}
	
	.sub-slogan {
		font-size: 28rpx;
		color: #666;
		margin-bottom: 60rpx;
	}
}

.btn {
	width: 90%;
	height: 90rpx;
	line-height: 90rpx;
	border-radius: 45rpx;
	margin-bottom: 30rpx;
	text-align: center;
	font-size: 32rpx;
	
	&.btn-primary {
		background-color: #07c160;
		color: #fff;
	}
	
	&.btn-secondary {
		background-color: #ff6b6b;
		color: #fff;
	}
}

.feature-grid {
	width: 100%;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 30rpx;
	padding: 40rpx 0;
}

.feature-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	
	.feature-icon-wrap {
		position: relative;
		margin-bottom: 10rpx;
	}
	
	.feature-icon {
		width: 80rpx;
		height: 80rpx;
	}
	
	.hot-tag {
		position: absolute;
		top: -10rpx;
		right: -10rpx;
		background-color: #ff4d4f;
		color: #fff;
		font-size: 20rpx;
		padding: 4rpx 10rpx;
		border-radius: 10rpx;
	}
	
	.feature-text {
		font-size: 24rpx;
		color: #333;
	}
}

.tab-bar {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	height: 100rpx;
	background-color: #fff;
	display: flex;
	justify-content: space-around;
	align-items: center;
	border-top: 1rpx solid #eee;
}

.tab-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	position: relative;
	
	.tab-icon {
		width: 48rpx;
		height: 48rpx;
		margin-bottom: 6rpx;
	}
	
	.tab-text {
		font-size: 20rpx;
		color: #666;
	}
	
	&.active {
		.tab-text {
			color: #07c160;
		}
	}
	
	.badge {
		position: absolute;
		top: -6rpx;
		right: -6rpx;
		background-color: #ff4d4f;
		color: #fff;
		font-size: 20rpx;
		min-width: 30rpx;
		height: 30rpx;
		line-height: 30rpx;
		text-align: center;
		border-radius: 15rpx;
		padding: 0 6rpx;
	}
}

.add-to-desktop {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0rpx;
	z-index: 99;
	background: #fff;
	padding: 20rpx 30rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
	
	.desktop-text {
		display: flex;
		align-items: center;
		flex: 1;
		
		.desktop-icon {
			width: 48rpx;
			height: 48rpx;
			margin-right: 20rpx;
		}
		
		.text-wrapper {
			.text-title {
				font-size: 28rpx;
				color: #333;
				font-weight: 500;
				display: block;
			}
			
			.text-content {
				font-size: 24rpx;
				color: #999;
				margin-top: 4rpx;
				display: block;
			}
		}
	}
	
	.add-btn {
		background: #07c160;
		color: #fff;
		font-size: 26rpx;
		padding: 12rpx 30rpx;
		border-radius: 30rpx;
		margin: 0 20rpx;
		border: none;
		
		&:active {
			opacity: 0.9;
		}
	}
	
	.close-icon {
		font-size: 40rpx;
		color: #999;
		padding: 10rpx;
	}
}

@keyframes slideUp {
	from {
		transform: translateY(100%);
		opacity: 0;
	}
	to {
		transform: translateY(0);
		opacity: 1;
	}
}
</style>
